<template>
  <div class=''> 
      <div ref="myChart" :style="{width: '100%', height: '250px'}"></div>  
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    echartsId: {
      type: String,
      default: '',
    },
  },
  data () {
    return { }
  },
  computed: { },
  created () { },
  mounted () { 
    this.init()
  },
  methods:{
      init(){
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(this.$refs.myChart)
        // 绘制图表
        var data = [];
        for (let i = 0; i < 5; ++i) {
            data.push(Math.round(Math.random() * 200));
        }
        // 指定图表的配置项和数据
        const option = {
            title:{
                text: '数据量对比',
                top: 'bottom',
                left: 'center',
                textStyle:{              
                    fontSize:'18',
                    color:'#2846ff',
                    fontFamily:'serif',
                }
            },
            xAxis: {
                max: 'dataMax',
            },
            grid: {
              x: 100,
            },
            yAxis: {
                type: 'category',
                data: ['中国', '俄罗斯', '美国', '英国', '法国'],
                inverse: true,
                animationDuration: 300,
                animationDurationUpdate: 300,
                max: 4 
            },
            series: [{
                  realtimeSort: true,
                  type: 'bar',
                  data: data,
                  label: {
                      show: true,
                      position: 'right',
                      valueAnimation: true
                  }
              }],
            legend: {
                show: true
            },
            animationDuration: 0,
            animationDurationUpdate: 3000,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        };
         function run () {
          var data = option.series[0].data;
          for (var i = 0; i < data.length; ++i) {
              if (Math.random() > 0.9) {
                  data[i] += Math.round(Math.random() * 2000);
              }
              else {
                  data[i] += Math.round(Math.random() * 200);
              }
          }
          myChart.setOption(option);
          }
          setTimeout(function() {
              run();
          }, 0);
          setInterval(function () {
              run();
          }, 1000);
      }
  }
}
</script>

<style scoped lang='less'></style>

